<template>
  <!-- 个人优势 -->
  <view class="box">
    <view class="head">
      <view class="title">
        <image
          class="fanhui"
          @click.stop="fanhui"
          src="https://pic.bangbangtongcheng.com/static/bbzc/left-btn.png"
          mode=""
        >
        </image>
        <view class="title-text">填写简历</view>
      </view>
    </view>

    <view class="center-section">
      <view class="content-title">
        <view style="font-size: 28rpx; color: #333">
          工作描述：<span style="color: #0fa291">{{ jobContentNum }}</span> /2000
        </view>
        <view class="content-title-right" @click="popTemShow">
          <img
            style="margin-right: 10rpx; width: 24rpx; height: 24rpx"
            src="https://pic.bangbangtongcheng.com/static/bbzc/check-demo.png"
            alt=""
          />查看示例
        </view>
      </view>
      <view class="content-tip">
        请勿在描述中填写电话、微信、邮箱等联系方式，否则其内容可能被删除或者屏蔽。
      </view>
      <view class="kuang">
        <!-- <textarea
          class="textareaAuto"
          :maxlength="2000"
          v-model="jobContent"
          :placeholder="describe"
          placeholderStyle="font-size:24rpx;color:#ccc"
          @input="jobInput"
        /> -->

        <u--textarea
          v-model="jobContent"
          maxlength="2000"
          confirmType="done"
          :placeholder="describe"
          placeholderStyle="font-size:24rpx;color:#ccc"
          height="420rpx"
          border="none"
          @input="jobInput"
        ></u--textarea>
      </view>
    </view>

    <view class="advance">
      <view class="advance-title">
        个人优势：
        <span style="font-size: 24rpx; color: #999999">总结优势，突出亮点</span>
      </view>
      <view class="advance-list">
        <view
          v-for="(item, index) in advanceOption"
          :key="index"
          :class="item.checked ? 'checked form-btn' : 'form-btn'"
          @click="chooseAdvance(index)"
          >{{ item.valueName }}</view
        >
        <view class="form-btn" @click="custom">自定义+</view>
      </view>
    </view>

    <view class="text"> 恭喜你简历填写完成，发布后还可继续完善！ </view>

    <view class="submit-box">
      <view class="submit-txt">
        <span v-if="checked" class="checkbox agree" @click="changeAgree">
          <u-icon name="checkbox-mark" color="#fff" size="14"></u-icon>
        </span>
        <span v-else class="checkbox reject" @click="changeAgree"></span>
        <span @click="changeAgree">
          发布即默认同意 <span @click.stop="toUs(2)">《帮帮同城隐私政策》</span> 和
          <span @click.stop="toUs(3)">《帮帮同城用户协议》</span>
        </span>
      </view>
      <view class="submit-btn" @click="stepSubmit">确认发布</view>
    </view>

    <u-popup
      :show="bindPublic"
      mode="center"
      :zoom="false"
      bgColor="transparent"
      @close="bindPublicClose"
      @open="bindPublicOpen"
    >
      <view class="bindPublicSuccess_frame">
        <view class="binds_frame_t">
          <image src="https://pic.bangbangtongcheng.com/static/PublicButton/refresh.png"></image
          >简历发布成功，审核中...
        </view>
        <view class="binds_frame_c">信息审核通过后，可在“我的-完善简历”中继续完善</view>
      </view>
    </u-popup>

    <u-popup
      :show="popTem"
      mode="bottom"
      :zoom="false"
      bgColor="transparent"
      @close="popTemClose"
      @open="popTemOpen"
    >
      <view class="pop">
        <view class="pop-title">
          <span class="title">示例</span>
          <img
            class="close"
            src="https://pic.bangbangtongcheng.com/static/bbzc/close.png"
            alt=""
            @click="popTemHide"
          />
        </view>
        <view v-if="show.popWorkTem" ref="temText" class="pop-content">
          <scroll-view scroll-y style="height: 500rpx;">
            <textarea
              ref="text"
              maxlength="2000"
              style="width: 100%"
              auto-height
              v-model="text"
              disabled
              placeholder="模板内容"
              placeholderStyle="font-size:24rpx;color:#ccc"
            />
          </scroll-view>
        </view>
        <view class="pop-btn">
          <view class="btn-on" @click="useTem">
            <img src="https://pic.bangbangtongcheng.com/static/bbzc/use.png" alt="" />
            使用此模板</view
          >
          <view class="btn-off" @click="changeTem">
            <img src="https://pic.bangbangtongcheng.com/static/bbzc/refresh.png" alt="" />换一个
          </view>
        </view>
      </view>
    </u-popup>

    <u-popup
      :show="bindAddFL"
      mode="center"
      :zoom="false"
      bgColor="transparent"
      @close="bindAddFLClose"
      @open="bindAddFLOpen"
    >
      <view class="bindAddFL_frame">
        <view class="title">
          <view class="title_right"></view>
          <view class="title_center"> 个人优势 </view>
          <view class="title_right" @click="bindAddFL_close">
            <image
              class="image"
              src="https://pic.bangbangtongcheng.com/static/bbzc/FuLiClose.png"
            ></image>
          </view>
        </view>
        <view class="center">
          <input
            class="inputs"
            v-model="customAdvance"
            placeholder="请输入自定义个人优势"
            type="text"
            @input="addFuliInput"
            placeholder-style="font-size:24rpx;color:#ccc"
          />
          <span class="inputs_zis">{{ count }}/5</span>
        </view>
        <view class="bottoms" @click="confirmAdd"> 完成 </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
  import permision from '@/js_sdk/wa-permission/permission.js'
  //#ifdef H5
  import wxshare from '@/utils/index.js'
  //#endif
  import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        bindPublic: false,
        popTem: false,
        bindAddFL: false,
        show: {
          popWorkTem: false,
        },
        userInfo: uni.getStorageSync('Pduser'),
        WXwidth: '',
        describe: '请输入职位描述:\n1.工作内容 \n2.任职要求',
        jobContent: '',
        jobContentNum: 0, // 工作描述字数
        advanceOption: [],
        timeout: null,
        customAdvance: '',
        count: 0,
        personalAdvantages: [], // 个人优势
        checked: false,
        dataDictionaryList: [], // 示例模板
        text: '',
      }
    },
    async onLoad() {
      var than = this
      // 获取微信小程序胶囊和据右边宽度
      // #ifdef MP-WEIXIN
      // 获取胶囊信息
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      let getWindowInfo = uni.getWindowInfo().screenWidth
      this.WXwidth = getWindowInfo - (menuButtonInfo.right - menuButtonInfo.width)
      // #endif
      this.jobContent = uni.getStorageSync('grys_key') || ''
      uni.removeStorageSync('grys_key')
      this.getTem()
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    },
    computed: {
      ...mapGetters(['userid', 'islogin', 'statusBarHeight1', 'userinfo']),
    },
    methods: {
      bindPublicClose() {
        this.bindPublic = false
      },
      bindPublicOpen() {
        this.bindPublic = true
      },
      popTemClose() {
        this.popTem = false
      },
      popTemOpen() {
        this.popTem = true
      },
      bindAddFLClose() {
        this.bindAddFL = false
      },
      bindAddFLOpen() {
        this.bindAddFL = true
      },
      toUs(type) {
        uni.navigateTo({
          url: '/pages_my/Us?type=' + type,
        })
      },
      getTem() {
        // 获取个人优势
        this.$myRequest
          .get('/api/mobile/personnelOwner/queryDataDictionaryList', {
            type: 14,
          })
          .then((res) => {
            if (res.code == 200) {
              let data = res.dataDictionaryList
              if (data && data.length > 0) {
                data.map((v) => {
                  v.checked = false
                })
                this.advanceOption = data
                console.log('this.advanceOption', this.advanceOption)
                this.init()
              }
            }
          })

        // 获取示例模版
        this.$myRequest
          .get('/api/mobile/personnelOwner/queryDataDictionaryList', {
            type: 12,
          })
          .then((res) => {
            if (res.code == 200) {
              const len = res.dataDictionaryList.length
              if (len > 0) {
                this.dataDictionaryList = res.dataDictionaryList
                this.text = res.dataDictionaryList[0].valueName
                // console.log('text', this.text);
              }
            }
          })
      },
      init() {
        const curriculumVitae = uni.getStorageSync('curriculumVitae')

        console.log('curriculumVitae', curriculumVitae)
        if (curriculumVitae) {
          // 回显工作描述
          if (curriculumVitae.workExperience) {
            let workExperience = JSON.parse(curriculumVitae.workExperience)[0]
            console.log('workExperience:', workExperience)
            this.jobContent = workExperience.jobContent
          }
          //回显个人优势
          if (curriculumVitae.personalAdvantages && this.advanceOption.length > 0) {
            let personalAdvantages = JSON.parse(curriculumVitae.personalAdvantages)
            console.log('personalAdvantages', personalAdvantages)
            console.log('this.advanceOption', this.advanceOption)
            // 更新advanceOption中已存在的项的checked属性
            this.advanceOption.forEach((newItem) => {
              const existingItem = personalAdvantages.find(
                (item) => item.valueName === newItem.valueName
              )
              if (existingItem) {
                newItem.checked = true
              }
            })
            // 将personalAdvantages中独有的项添加到advanceOption中
            const newItemsToAdd = personalAdvantages.filter(
              (newItem) => !this.advanceOption.some((item) => item.valueName === newItem.valueName)
            )

            console.log('newItemsToAdd', newItemsToAdd)
            //因为我们只想添加valueName和checked属性， 不想添加newArr中可能存在的其他属性。
            newItemsToAdd.forEach((newItem) => {
              this.advanceOption.push({
                valueName: newItem.valueName,
                checked: true,
              })
            })
          }
        }
      },
      // 工作经历模版
      popTemShow() {
        this.popTem = true
        this.show.popWorkTem = !0;
      },
      popTemHide() {
        this.popTem = false
        this.show.popWorkTem = !1;
      },
      // 使用此模板
      useTem() {
        let text;
        if (this.text.length <= 2000) {
          text = this.text;
        } else {
          text = this.text.slice(0,2000);
        }
        this.jobContent = text;
        this.jobContentNum = this.jobContent.length;
        this.popTemHide();
      },
      // 换一个
      changeTem() {
        const len = this.dataDictionaryList.length
        const index = Math.floor(Math.random() * len)
        this.text = this.dataDictionaryList[index].valueName
      },
      fanhui(index) {
        if (index == '1') {
          let pages = getCurrentPages()
          let prevPage = pages[pages.length - 2]
          prevPage.$vm.curriculumVitae.personalAdvantages = this.curriculumVitae.personalAdvantages
        }
        uni.navigateBack({
          delta: 1,
        })
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      chooseAdvance(index) {
        console.log('indx', index)
        this.advanceOption[index].checked = !this.advanceOption[index].checked
      },
      // 同意隐私政策和用户协议
      changeAgree() {
        this.checked = !this.checked
      },
      // 工作描述 - 文本框输入
      jobInput(e) {
        this.jobContentNum = e.length >= 2000 ? 2000 : e.length;
      },
      // 自定义
      custom() {
        this.customAdvance = ''
        this.bindAddFL = true
      },
      // 关闭自定义
      bindAddFL_close() {
        this.customAdvance = '';
        this.count = this.customAdvance.length;
        this.bindAddFL = false
      },
      // 输入自定义个人优势
      addFuliInput(e) {
        // 苹果输入法会有英文字母占位，所以使用maxlength 会有bug
        this.timeout && clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          if (e.detail.value.length > 5) this.customAdvance = e.detail.value.slice(0, 5);
          this.count = this.customAdvance.length;
          clearTimeout(this.timeout);
          this.timeout = null;
        },100)
      },
      // 完成
      confirmAdd() {
        if (this.customAdvance) {
          this.personalAdvantages.push(this.customAdvance)
          this.advanceOption.push({
            valueName: this.customAdvance,
            checked: true,
          })
        }
        this.bindAddFL_close()
      },
      // 提交
      stepSubmit() {
        if (this.checked) {
          let curriculumVitae = uni.getStorageSync('curriculumVitae')
          let workExperience = curriculumVitae.workExperience;
          const personalAdvantages = this.advanceOption.filter((item) => item.checked);
          if (workExperience) {
            const workExperienceObj = JSON.parse(workExperience)[0]
            // console.log('workExperience', typeof(workExperience));
            workExperienceObj.jobContent = this.jobContent;
            workExperienceObj.personalAdvantage = JSON.stringify(personalAdvantages);
            curriculumVitae.workExperience = JSON.stringify([workExperienceObj]);
          }

          // curriculumVitae.personalAdvantages = JSON.stringify(personalAdvantages)

          uni.setStorageSync('curriculumVitae', curriculumVitae)
          // console.log('workExperience', workExperience);
          // console.log('curriculumVitae', curriculumVitae);

          curriculumVitae.auditNum = 1 // 1 - 第一次填写简历 2 - 第n次完善简历
          this.$myRequest
            .post('/api/mobile/personnelOwner/publishOrEditResume', curriculumVitae)
            .then((res) => {
              if (res.code == 200) {
                this.bindPublic = true
                setTimeout(() => {
                  this.bindPublic = false
                  uni.switchTab({
                    url: '/pages/my/index',
                  })
                }, 3000)
                setTimeout(() => {
                  this.anti_shake = false
                }, 500)
              }
            })
        } else {
          uni.showToast({
            title: '请勾选同意隐私政策和用户协议',
            icon: 'none',
            mask: true,
          })
          return false
        }
      },
      queding() {
        this.bindPublic = false
      },
    },
  }
</script>
<style lang="less" scoped>
  .box {
    padding-top: 100rpx;
    padding-bottom: 150rpx;
    width: 100%;
    min-height: 100vh;
    background: #f5f7f9;
  }

  .head {
    padding: 20rpx;
    width: 100%;
    height: 100rpx;

    .title {
      display: flex;
      justify-content: start;
      align-items: center;
      width: 100%;
      height: 60rpx;
    }

    .fanhui {
      width: 30rpx;
      height: 30rpx;
    }

    .title-text {
      margin-left: 10rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #000;
    }

    .head_right {
      font-size: 30rpx;
      font-weight: 400;
      color: #ffffff;
    }
  }

  .center-section {
    margin: 0 auto;
    padding: 30rpx 20rpx;
    width: 710rpx;
    background: #ffffff;
    border-radius: 20rpx;

    .content-title {
      display: flex;
      // justify-content: space-between;
      align-items: center;

      .content-title-right {
        margin-left: 20rpx;
        display: flex;
        align-items: center;
        color: #0fa291;
        font-size: 24rpx;
      }
    }

    .content-tip {
      margin: 20rpx 0;
      font-size: 24rpx;
      color: #e00201;
    }

    .kuang {
      position: relative;

      .textareaAuto {
        width: 100%;
        height: 420rpx;
        overflow-y: auto;
      }
      ::-webkit-scrollbar {
        background-color: transparent !important;
        /* 轨道颜色透明 */
      }

      ::-webkit-scrollbar-thumb {
        background-color: #ebebed !important;
        /* 滑块颜色为红色 */
        box-shadow: none !important;
      }

      /* 设置滚动条轨道样式 */
      ::-webkit-scrollbar-track {
        background: none !important;
        /* 轨道颜色透明 */
        box-shadow: none !important;
      }
    }
  }

  .advance {
    margin: 0 auto;
    margin-top: 20rpx;
    padding: 30rpx 20rpx;
    width: 710rpx;
    background: #ffffff;
    border-radius: 20rpx;

    .advance-title {
      margin-bottom: 30rpx;
    }

    .advance-list {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;

      .form-btn {
        margin: 0 22rpx 20rpx 0;
        width: 204rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        font-size: 24rpx;
        color: #666;
        background: #fff;
        border: 2rpx solid #999;
        border-radius: 15rpx;
        &:nth-child(3n) {
          margin-right: 0;
        }
      }

      .checked {
        position: relative;
        color: #0fa291;
        background: #e7f5f4;

        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          right: 0;
          width: 28rpx;
          height: 28rpx;
          background: url('https://pic.bangbangtongcheng.com/static/bbzc/checked-tag.png') center
            no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }

  .bindAddFL_frame {
    background-color: #ffffff;
    width: 600rpx;
    height: 250rpx;
    border-radius: 10rpx;
    padding: 28rpx 32rpx 10rpx 32rpx;

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 34rpx;

      .title_center {
        font-size: 30rpx;
        font-weight: 400;
        color: #000000;
      }

      .title_right {
        width: 32rpx;
        height: 32rpx;

        .image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .center {
      width: 540rpx;
      height: 60rpx;
      border-radius: 8rpx;
      border: 2rpx solid #999999;
      position: relative;

      .inputs {
        width: 100%;
        height: 100%;
        padding: 4rpx 10rpx;
      }

      .inputs_zis {
        position: absolute;
        right: 10rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .bottoms {
      width: 100%;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      font-weight: 400;
      color: #0fa291;
    }
  }

  .text {
    margin: 30rpx auto;
    width: 710rpx;
    height: 56rpx;
    line-height: 56rpx;
    color: #333;
    font-weight: 500;
    font-size: 24rpx;
    text-align: center;
    background: #ffedea;
    border-radius: 10rpx;
  }

  .submit-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #f5f7f9;
    padding-bottom: calc(env(safe-area-inset-bottom) / 2);

    .submit-txt {
      margin: 20rpx auto;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      font-size: 24rpx;

      .checkbox {
        margin-right: 10rpx;
        width: 28rpx;
        height: 28rpx;
        border-radius: 8rpx;
      }

      .agree {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #0fa291;
        border: 2rpx solid #0fa291;
      }

      .reject {
        background: #ddd;
        border: 2rpx solid #999;
      }
    }

    .submit-btn {
      margin: 0 auto;
      width: 710rpx;
      text-align: center;
      line-height: 100rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #fff;
      background: #0fa291;
      border-radius: 50rpx;
    }
  }

  .bindPublicSuccess_frame {
    overflow: hidden;
    padding: 30rpx 20rpx;
    width: 600rpx;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 10rpx;
    font-weight: 500;
    color: #ffffff;
    line-height: 40rpx;

    image {
      margin-right: 10rpx;
      width: 28rpx;
      height: 28rpx;
    }

    .binds_frame_t {
      margin-bottom: 19rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
    }

    .binds_frame_c {
      text-align: left;
      font-size: 24rpx;
      white-space: nowrap;
      text-align: center;
    }
  }

  .pop {
    padding: 30rpx 20rpx;
    background: #fff;
    border-radius: 30rpx 30rpx 0 0;

    .pop-title {
      position: relative;
      margin-bottom: 30rpx;
      text-align: center;

      .title {
        font-weight: 500;
        font-size: 32rpx;
        color: #000000;
      }

      .close {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 30rpx;
        height: 30rpx;
      }
    }

    .pop-content {
      padding: 20rpx;
      width: 710rpx;
      line-height: 52rpx;
      color: #333;
      font-size: 28rpx;
      background: #f5f7f9;
      border-radius: 10rpx;
    }

    .pop-btn {
      margin: 30rpx 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      box-sizing: border-box;

      & > view {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 325rpx;
        height: 90rpx;
        border-radius: 45rpx;

        & > img {
          width: 32rpx;
          height: 32rpx;
        }
      }

      .btn-on {
        color: #fff;
        background: #0fa291;

        & > img {
          margin-right: 20rpx;
        }
      }

      .btn-off {
        color: #0fa291;
        background: #e7f5f4;
        border: 2rpx solid #0fa291;

        & > img {
          margin-right: 32rpx;
        }
      }
    }
  }
</style>
